<template>
  <div>
    <a-button type="primary" @click="showModal">选择店铺</a-button>
    <a-modal v-model="visible" title="选择店铺" @ok="handleOk" width="75%" :bodyStyle="{maxHeight: 'calc(100vh - 120px)'}">
      <a-layout class="modal-content">
        <a-layout-sider class="modal-content__search" width="50%">
          <div class="modal-content__search-input">
            <a-input-search
              :placeholder="queryParamKey=='store_name'?'请输入店铺名称':'请输入商户名称'"
              @search="onSearch"
              class="input-search"
            >
              <a-button slot="enterButton" type="link" class="search-button">
                搜 索
              </a-button>
              <a-select slot="addonAfter" v-model="queryParamKey" style="width:140px">
                <a-select-option value="store_name">
                  搜索店铺
                </a-select-option>
                <a-select-option value="merchant_name">
                  搜索商户
                </a-select-option>
              </a-select>
            </a-input-search>
          </div>
          <a-tabs
            default-active-key="1"
            tab-position="left"
            :style="{ height: '100%' }"
            @prevClick="callback"
            @nextClick="callback"
          >
            <a-tab-pane v-for="i in 30" :key="i" :tab="`Tab-${i}`"> Content of tab {{ i }} </a-tab-pane>
          </a-tabs>
        </a-layout-sider>
        <a-layout-content class="modal-content__content">Content</a-layout-content>
      </a-layout>
    </a-modal>
  </div>
</template>
<script>
const tabsPane = [{ value: '所有店铺', key: 'all' }]
export default {
  data () {
    return {
      visible: true,
      queryParamKey: 'store_name',
      tabsPane
    }
  },
  methods: {
    showModal () {
      this.visible = true
    },
    handleOk (e) {
      console.log(e)
      this.visible = false
    },
    onSearch (val) {
      console.log(val, 'onSearch')
    },
    callback (val) {
      console.log(val, 'callback')
    }
  }
}
</script>
<style lang="less" scoped>
.modal-content{
    border: 1px solid #dee0e3;
    border-radius: 4px;
    overflow: hidden;
    /deep/ .ant-layout-sider, .ant-layout-content {
        background: white;
    }
    &__search{
        padding: 16px 0 0 16px;
        &-input{
            border-radius: 16px;
            margin-bottom: 8px;
            margin-right: 16px;
            border: 1px solid #dee0e3;
            border-radius: 6px;
            overflow: hidden;
            .input-search /deep/ .ant-input-wrapper{
                display: flex;
                align-items: center;
                .ant-input{
                    border: none;
                    flex: 1;
                    // border-right: 1px solid #dee0e3;
                }
                .ant-input-group-addon{
                    flex: 0 0 200px;
                    display: flex;
                    align-items: center;
                    background-color: transparent;
                    .ant-select{
                        margin: 0;
                    }
                }
            }
            .search-button{
                height: 40px;
                width: 68px;
                padding: 0;
                border-radius: 0;
                border: none;
                background-color: transparent;
                border-right: 1px solid #dee0e3;
            }
        }
    }
    &__content{
        flex: 0 0 50% !important;
        padding: 16px 0 16px 12px;
        border-left: 1px solid #dee0e3;
    }
}
.wrapClassName{
    width: 894px;
    max-height: calc(100vh - 120px);
}

</style>
